<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<script>
			//增加
			
			//创建元素
			var li_06 = document.createElement('li');
			li_06.className = '06';
			var li_06_txt = document.createTextNode('6');
			var ul = document.querySelector('ul');
			var ul_ = ul.children;
			/*Node.appendChild( new_child )		 	
			 	在Node里的孩子的队尾添加new_child
			 * */
			li_06.appendChild(li_06_txt);
			ul.appendChild(li_06);
			
			console.log(ul);
			console.log(li_06_txt.nodeValue);
			console.log(li_06_txt.data);
				
			li_06_txt.nodeValue = '06';
			console.log(li_06_txt.data);
			
			/*Node.insertBefore(new_child,position)
			 	在Node里的孩子的position(元素)添加new_child
			 * 	(null == undefined  // true)
			 * */
			//插在前面
			ul.insertBefore( li_06 , ul_[2]);
			ul.insertBefore( li_06 , null);
			
			
			//增加/替换文本
			
			//textContent和innerTexr只管输出文本，不解析内容,innerHTML可以添加标签
			// outerHTML会把自己本身替换
			ul_[4].innerText = '5555';
			ul_[4].outerHTML = '<p>5555</p>';
			ul_[3].innerHTML = '5555';
			ul_[2].textContent = '<p>5555</p>';
			
			
			
//			var ul_elem = document.getElementsByTagName('ul')[0];
//			var ul_query = document.querySelectorAll('ul')[0];
//			
//			var li_07 = document.createElement('li');
//			
//			ul_elem.appendChild(li_07);
//			ul_query.appendChild(li_07);
//			console.log(ul_elem);
//			console.log(ul_query);

//query系列 和 Element系列  ，query(NodeList) element(HTMLcollection)    query系列的方法像拍张 不能动态添加删除节点
			
		</script>
	</body>
</html>
